<template>
  <div ref="chartRef1" class="barChart1"></div>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>
<script lang="ts" setup>
  import { onMounted, ref, Ref, defineExpose } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { datacollectionrate } from '/@/api/requestApi/boardApi';
  defineProps({
    ...basicProps,
  });
  const chartRef1 = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef1 as Ref<HTMLDivElement>);
  async function getdatacollectionrate() {
    return new Promise((resolve) => {
      datacollectionrate()
        .then((res) => {
          let todaymoney = res.yesterday;
          // let todaymoney = 46.3;
          let legendData = '昨日采集率' + todaymoney + '%';
          let symoney = 100 - parseFloat(todaymoney);
          setOptions({
            legend: {
              icon: 'circle',
              itemWidth: 10,
              itemHeight: 10,
              top: '0',
              left: '55%',
              data: [legendData],
              textStyle: {
                color: '#fff',
              },
            },
            // //点击提示文字
            tooltip: {
              show: false,
            },
            series: [
              {
                name: legendData,
                type: 'pie',
                radius: '50%',
                center: ['50%', '55%'], //左右，上下
                avoidLabelOverlap: false,
                color: ['#20E3FF', 'rgba(54,70,106, 0.57)'],
                labelLine: {
                  show: false,
                },
                //牵引线条颜色
                data: [todaymoney, symoney],
              },
            ],
          });
          resolve(true);
        })
        .catch(() => {
          resolve(false);
        });
    });
  }
  defineExpose({ getdatacollectionrate });
  onMounted(() => {
    getdatacollectionrate();
  });
</script>
<style lang="less" scoped>
  .barChart1 {
    width: 100%;
    height: 100%;
  }
</style>
